<html>
	<head>
		<meta charset="utf-8">
		<link href="../../gitlab/assets/application.css" rel="stylesheet">
		<style>
			.empty {
				padding: 16px 0;
				position: relative;
			}
			.empty > .inner .img{
				background-repeat: no-repeat;
				background-position: center top;
			}
			.empty > .inner button {
				border: 0;
			}
			.empty > .inner .text {
				padding: 16px 0 0;
				text-align: center;
			}
			.empty[type=computer] > .inner .img {
				position: relative;
				background-image: url(../../gitlab/images/empty-computer.png);
				height: 200px;
			}
			.empty[type=computer] > .inner .info {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: rgba(0,0,0,0.55);
				text-align: center;
			}
			.empty[type=moon] > .inner .img {
				position: relative;
				background-image: url(../../gitlab/images/empty-moon.png);
				height: auto;
			}
			.empty[type=moon] > .inner .info {
				padding: 180px 0 0;
				color: rgba(0,0,0,0.55);
				text-align: center;
			}
			.empty[type=book] > .inner .img {
				position: relative;
				background-image: url(../../gitlab/images/empty-book.png);
				height: auto;
			}
			.empty[type=book] > .inner .info {
				padding: 240px 0 0;
				color: rgba(0,0,0,0.55);
				text-align: center;
			}
			.not-found{
				width: 100%;
				max-width: 1200px;
				margin: 0 auto;
				padding: 16px 0
			}
			.not-found > .inner {
				display: flex;
			}
			.not-found > .inner .text {
				flex: 1;
			}
			.not-found > .inner .img{
				order: 2;
			}
			.not-found > .inner .text{
				order: 1;
			}
			.not-found > .inner .text > .type {
				font-size: 66px;
				font-weight: bolder;
				color: #bcc1cc;
				padding: 50px 0 0;
				font-family: Consolas Arial;
			}
			.not-found > .inner .text > .info {
				font-size: 24px;
				padding: 20px 0 0;
			}
			.not-found > .inner .text > .detail {
				font-size: 14px;
				padding: 0 0 20px;
				color: #bbb;
			}
			.logo{
				fill: currentColor;
				vertical-align: -0.15em;
				overflow: hidden;
				width: 1em;
				height: 1em;
			}
			.status{
				margin: 0 auto;
				display: flex;
			}
			.status .img{
				width: 180px;
				height: 180px;
				margin: 0 auto;
				background-repeat: no-repeat;
			}
			.status .inner{
				flex: 1;
			}
			.status .logo{
				width: 1em;
				height: 1em;
				border: 0;
			}
			.status svg use{
				stroke: rgba(0,0,0,0) !important;
			}
			.status.status-bag .img{
				background-image: url(../img/empty_bag.png)
			}
			.status.status-board .img{
				background-image: url(../img/empty_board.png)
			}
			.status.status-error .img{
				background-image: url(../img/empty_error.png)
			}
			.status.status-gps .img{
				background-image: url(../img/empty_gps.png)
			}
			.status.status-id .img{
				background-image: url(../img/empty_id.png)
			}
			.status.status-list .img{
				background-image: url(../img/empty_list.png)
			}
			.status.status-off-line .img{
				background-image: url(../img/empty_offline.png)
			}
			.status.status-search .img{
				background-image: url(../img/empty_search.png)
			}
			.status[data-direction="vertical"]{
				flex-direction: column;
				width: 300px;
			}
			.status[data-direction="vertical"] .message{
				text-align: center;
				padding: 0 0 16px;
			}
			.status[data-direction="vertical"] .handle{
				text-align: center;
			}
			.status[data-direction="horizontal"]{
				width: 500px;
				flex-direction: row;
				justify-content: space-between;
				align-items:center;
			}
			.status[data-direction="horizontal"] .img{
				order: 1;
			}
			.status[data-direction="horizontal"] .message{
				padding: 0 0 16px;
			}
			.notfound{
				display: flex;
				align-items:center;
			}
			.notfound .text{
				color: rgba(0,0,0, .5);
				padding: 0 0 0 6px;
			}
			.notfound .symbol{
				color: rgba(0,0,0,.25);
			    padding: 0 6px;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="126" height="86" style="display: none; position: absolute; left: -999em; top: -999em;">
			<symbol id="logo" viewBox="0 0 126 86">
				<ellipse cx="0" cy="50" rx="15" ry="40" style="transform: rotate(-45deg);" 
				fill="#ff8b04" 
				data-active-color="#fcc07a" /> 
				<ellipse cx="90" cy="-40" rx="15" ry="40" style="transform: rotate(45deg);" 
				fill="#ff8b04" 
				data-active-color="#fcc07a" /> 
				<ellipse cx="-14" cy="56" rx="15" ry="32" style="transform: rotate(-55deg);" 
				fill="#fd9e32" 
				data-active-color="#fcc07a" /> 
				<ellipse cx="88" cy="-48" rx="15" ry="32" style="transform: rotate(55deg);" 
				fill="#fd9e32" 
				data-active-color="#fcc07a" /> 
				<ellipse cx="-38" cy="50" rx="12" ry="26" style="transform: rotate(-75deg);" 
				fill="#ffb258" 
				data-active-color="#ff8b04"/> 
				<ellipse cx="71" cy="-73" rx="12" ry="26" style="transform: rotate(75deg);" 
				fill="#ffb258" 
				data-active-color="#ff8b04" /> 
				<ellipse cx="-79" cy="-2" rx="12" ry="22" style="transform: rotate(-125deg);" 
				fill="#fcc07a" 
				data-active-color="#ff8b04" /> 
				<ellipse cx="6" cy="-107" rx="12" ry="22" style="transform: rotate(125deg);" 
				fill="#fcc07a" 
				data-active-color="#ff8b04" /> 
			</symbol>
		</svg>

		<div class="notfound">
			<svg class="logo" style="font-size: 20px; opacity: .6">
				<use xlink:href="#logo" />
			</svg>
			<div class="text">
				数据为空
				<span class="symbol">/</span>
				<a href="#">
					返回首页
				</a>
				-
				<a href="#">Check it out</a>
			</div>
		</div>

		<div class="status status-bag" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					
					提示信息 data-direction="vertical"
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">
						<svg class="logo" style="font-size: 20px; opacity: .6">
							<use xlink:href="#logo" />
						</svg>
						返回首页
					</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="status status-bag" data-direction="horizontal">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息 data-direction="horizontal"
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">
						<svg class="logo" style="font-size: 20px; opacity: .6">
							<use xlink:href="#logo" />
						</svg>
						返回首页
					</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>
		
		<hr>

		<div class="status status-board" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">返回首页</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="status status-error" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">返回首页</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="status status-gps" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">返回首页</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="status status-id" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">返回首页</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="status status-list" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">返回首页</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="status status-off-line" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">返回首页</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="status status-search" data-direction="vertical">
			<div class="img"></div>
			<div class="inner">
				<div class="message">
					提示信息
				</div>
				<div class="handle">
					<a class="btn btn-default" href="#">返回首页</a>
					<a class="btn btn-warning" href="#">Check it out</a>
				</div>
			</div>
		</div>

		<hr>

		<div class="empty" type="computer">
			<div class="inner">
				<div class="img">
					<div class="info">数据为空<br>或其他提示</div>
				</div>
				<div class="text">
					您可以 : 
					<button type="button" class="label" style="background-color: rgb(68, 173, 142);">返回首页</button>
					<button type="button" class="label" style="background-color: rgb(92, 184, 92);">返回首页</button>
					<button type="button" class="label" style="background-color: rgb(255, 236, 219); color: rgb(51, 51, 51);">返回首页</button>
				</div>
			</div>
		</div>

		<hr>

		<div class="empty" type="moon">
			<div class="inner">
				<div class="img">
					<div class="info">数据为空或其他提示</div>
				</div>
				<div class="text">
					您可以 : 
					<button type="button" class="label" style="background-color: rgb(68, 173, 142);">返回首页</button>
					<button type="button" class="label" style="background-color: rgb(92, 184, 92);">返回首页</button>
					<button type="button" class="label" style="background-color: rgb(255, 236, 219); color: rgb(51, 51, 51);">返回首页</button>
				</div>
			</div>
		</div>

		<hr>

		<div class="empty" type="book">
			<div class="inner">
				<div class="img">
					<div class="info">数据为空或其他提示</div>
				</div>
				<div class="text">
					您可以 : 
					<button type="button" class="label" style="background-color: rgb(68, 173, 142);">返回首页</button>
					<button type="button" class="label" style="background-color: rgb(92, 184, 92);">返回首页</button>
					<button type="button" class="label" style="background-color: rgb(255, 236, 219); color: rgb(51, 51, 51);">返回首页</button>
				</div>
			</div>
		</div>

		<hr>

		<div class="not-found">
			<div class="inner">
				<div class="img">
					<svg class="logo" style="font-size: 21em; opacity: .6">
						<desc>MasterLab</desc>
						<use xlink:href="#logo" />
					</svg>
				</div>
				<div class="text">
					<div class="type">404</div>
					<div class="info">您所访问的页面被外星人劫持了</div>
					<div class="detail">The pages you visit may have been deleted, renamed or is temporarily unavailable.</div>
					<div class="you-can">
						您可以：
						<a class="btn btn-default" href="#">Check it out</a>
						<a class="btn btn-warning" href="#">Check it out</a>
						<a class="btn btn-primary" href="#">Check it out</a>
						<a class="btn btn-success" href="#">Check it out</a>
					</div>
				</div>
			</div>
		</div>

		<hr>

		<div class="not-found">
			<div class="inner">
				<div class="img">
					<svg class="logo" style="font-size: 21em; opacity: .6">
						<desc>MasterLab</desc>
						<use xlink:href="#logo" />
					</svg>
				</div>
				<div class="text">
					<div class="type">500</div>
					<div class="info">您所访问的页面被外星人劫持了</div>
					<div class="detail">The pages you visit may have been deleted, renamed or is temporarily unavailable.</div>
					<div class="you-can">
						您可以：
						<a class="btn btn-default" href="#">Check it out</a>
						<a class="btn btn-warning" href="#">Check it out</a>
						<a class="btn btn-primary" href="#">Check it out</a>
						<a class="btn btn-success" href="#">Check it out</a>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>